<script lang="ts" setup>
import { ref, shallowRef, watch, createApp } from 'vue'

import { onMounted } from 'vue'
import { Marked } from 'marked'
import { markedHighlight } from 'marked-highlight'
import hljs from 'highlight.js'
//引入markdown样式
import 'highlight.js/styles/atom-one-dark.css'
// import 'highlight.js/styles/devibeans.css'
const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})
onMounted(() => {})
const articleDetails = ref()
const marked = new Marked(
  markedHighlight({
    langPrefix: 'hljs language-',
    highlight(code, lang) {
      const language = hljs.getLanguage(lang) ? lang : 'shell'
      return hljs.highlight(code, { language }).value
    }
  })
)
watch(
  () => props.content,
  val => {
    articleDetails.value = marked.parse(val)
  }
)
onMounted(async () => {
  articleDetails.value = marked.parse(props.content)
})
</script>


<template>
  <div class="markdown-body">
    <div
      v-html="articleDetails"
      class="markdown-body">
    </div>
  </div>
</template>

  <style scoped>
.markdown-body {
  border-radius: 10px;
}
pre {
  border-radius: 10px;
}
</style>